<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>检测页面</title>
    <link href="https://chongzhi.nthink.cn/static/css/tailwind.min.css" rel="stylesheet">
    <script src="https://chongzhi.nthink.cn/static/js/jquery-3.6.0.min.js"></script>
    <link rel="stylesheet" href="https://chongzhi.nthink.cn/static/layUi/css/layui.css" media="all">
    <script src="https://chongzhi.nthink.cn/static/layUi/layui.js"></script>
    <style>
        body {
            background-color: #f9fafb; /* 灰色背景 */
        }
        .pie {
            position: relative;
            width: 50px; /* 饼图直径 */
            height: 50px; /* 饼图直径 */
            border-radius: 50%;
            background: conic-gradient(
                #3b82f6d4 0%, #2572f1ba,
                #e5e7eb var(--percent),
                #e5e7eb 100%
            );
            display: flex;
            align-items: center;
            justify-content: center;
            color: #454545;
            font-weight: bold;
        }
    </style>
</head>
<body class="flex items-center justify-center h-screen">

    <div class="bg-white rounded-lg  p-6 w-11/12 max-w-md" style="height: 100%;">
        <input type="hidden" name="code" id="code" value="${code}"/>
        <input type="hidden" name="userName" id="userName" value="${userName}"/>
        <input type="hidden" name="mobile" id="mobile" value="${mobile}"/>
        <input type="hidden" name="userType" id="userType" value="${type}"/>
        <input type="hidden" name="equityCode" id="equityCode" value="${equityCode}"/>
        <h2 class="text-center text-xl font-bold mb-4" style="margin-top: 10%;">操作说明</h2>
        <div class="border border-red-500 bg-red-100 text-red-700 p-4 rounded-lg mb-4">
            <p>1. 请点击下方“开始检测”按钮；</p>
            <p>2. 请将脸部放置在屏幕中间；</p>
            <p>3. 拍照后即可自动进行检测。</p>
        </div>
        <input type="file" accept="image/*" id="file-input" capture="camera" class="hidden">

        <div class="bg-blue-100 rounded-lg shadow-lg p-6 max-w-md" style="margin-top: 20px;     margin-bottom: 25px;" id="template">
            <div class="flex justify-center mb-4">
                <img id="output2" src="https://chongzhi.nthink.cn/static/face/faceTemplate.png" alt="检测图片" class="rounded-full w-24 h-24 object-cover">
            </div>
            <h2 class="text-xl font-bold mb-4">拍照提示：</h2>
            <p class="text-blue-800" id="desc2">正对摄像头，抬头正身，不要戴帽子、眼镜等面容遮挡物</p>
        </div>

        <button id="capture-btn" class="w-full bg-green-500 text-white py-2 rounded-lg hover:bg-green-600">
            开始检测
        </button>



        <canvas id="canvas" class="hidden"></canvas>
        <div id="content" style="display: none;">
            <div class="bg-white rounded-lg shadow-lg p-6 w-80" style="margin-top: 20px;width: 100%" >
                <h1 class="text-xl font-bold mb-4">检测报告：</h1>
                <div class="flex justify-between mb-4 border-b border-gray-300 pb-2">
                    <div class="text-center">
                        <div class="text-gray-600">肤龄</div>
                        <div class="text-lg text-green-500 font-semibold" id="age"></div>
                    </div>
                    <div class="border-l border-gray-300 mx-2"></div>
                    <div class="text-center">
                        <div class="text-gray-600">肤质</div>
                        <div class="text-lg text-green-500 font-semibold" id="skin_type_type"></div>
                    </div>
                    <div class="border-l border-gray-300 mx-2" ></div>
                    <div class="text-center">
                        <div class="text-gray-600">肤色</div>
                        <div class="text-lg text-green-500 font-semibold" id="color"></div>
                    </div>
                </div>
                <div class="text-center text-gray-600 mb-4">击败人数</div>
                <div class="flex justify-around">
                    <div class="text-center">
                        <div class="pie"  id="dark_circle_defeat"></div>
                    </div>
                    <div class="text-center">
                        <div class="pie"  id="pore_defeat"></div>
                    </div>
                    <div class="text-center">
                        <div class="pie" id="pockmark_defeat"></div>
                    </div>
                    <div class="text-center">
                        <div class="pie"  id="skin_type_defeat"></div>
                    </div>
                    <div class="text-center">
                        <div class="pie"  id="blackhead_defeat"></div>
                    </div>
                </div>
            </div>

            <div class="bg-white rounded-lg shadow-lg p-6 w-80" style="margin-top: 20px;width: 100%">
                <div class="flex items-center mb-4" >
                    <div class="w-4 h-4 bg-green-500 rounded mr-2" style="    height: 30px;width: 5px;"></div>
                    <h1 class="text-xl font-bold text-gray-800">黑眼圈</h1>
                    <span class="ml-2 text-l font-bold  text-green-500 bg-blue-100" id="dark_circle_score"></span>
                </div>
                <div class="flex items-center justify-center p-4">
                    <div class="flex-shrink-0">
                        <img class="h-24 w-24 rounded-full" src="your-image-url.jpg" alt="Profile Image" id="dark_circle_image">
                    </div>
                </div>

                <div class="p-4 bg-blue-100">
                    <p class="text-gray-700 leading-relaxed" id="dark_circle_conclusion">
                    </p>
                </div>
            </div>
            
            <div class="bg-white rounded-lg shadow-lg p-6 w-80" style="margin-top: 20px;width: 100%">
                <div class="flex items-center mb-4" >
                    <div class="w-4 h-4 bg-green-500 rounded mr-2" style="    height: 30px;width: 5px;"></div>
                    <h1 class="text-xl font-bold text-gray-800">肤色</h1>
                    <span class="ml-2 text-l font-bold  text-green-500 bg-blue-100" id="color_result"></span>
                </div>
                <div class="flex space-x-2 mb-4 text-center" style="color: #ffffff;">
                    <span style="background-color: #f9e5da; " class="px-3 py-1 rounded-full text-xs font-bold">淡色</span>
                    <span style="background-color: #f2d5c3; " class="px-3 py-1 rounded-full text-xs font-bold">白皙</span>
                    <span style="background-color: #f0c0a9; " class="px-3 py-1 rounded-full text-xs font-bold">自然</span>
                    <span style="background-color: #bf9c88; " class="px-3 py-1 rounded-full text-xs font-bold">小麦</span>
                    <span style="background-color: #97725f; " class="px-3 py-1 rounded-full text-xs font-bold">暗沉</span>
                    <span style="background-color: #684a42; " class="px-3 py-1 rounded-full text-xs font-bold">黝黑</span>
                </div>
                <div class="p-4 bg-blue-100">
                    <p class="text-gray-700 leading-relaxed" id="color_conclusion">

                    </p>
                </div>
            </div>

            <div class="bg-white rounded-lg shadow-lg p-6 w-80" style="margin-top: 20px;width: 100%">
                <div class="flex items-center mb-4" >
                    <div class="w-4 h-4 bg-green-500 rounded mr-2" style="    height: 30px;width: 5px;"></div>
                    <h1 class="text-xl font-bold text-gray-800">毛孔</h1>
                    <span class="ml-2 text-l font-bold  text-green-500 bg-blue-100" id="pore_score"></span>
                </div>
                <div class="flex items-center justify-center p-4">
                    <div class="flex-shrink-0">
                        <img class="h-24 w-24 rounded-full" src="your-image-url.jpg" alt="Profile Image" id="pore_image">
                    </div>
                </div>
                <table class="min-w-full text-center">
                    <thead>
                        <tr>
                            <th class="px-4 py-2 ">部位</th>
                            <th class="px-4 py-2 ">数量</th>
                            <th class="px-4 py-2 ">等级</th>
                            <th class="px-4 py-2 ">评分</th>
                        </tr>
                    </thead>
                    <tbody class="text-green-800 text-l">
                        <tr>
                            <td class="px-4 py-2" id="pore_0_cls"></td>
                            <td class="px-4 py-2" id="pore_0_count"></td>
                            <td class="px-4 py-2" id="pore_0_level"></td>
                            <td class="px-4 py-2" id="pore_0_score"></td>
                        </tr>
                        <tr>
                            <td class="px-4 py-2" id="pore_1_cls"></td>
                            <td class="px-4 py-2" id="pore_1_count"></td>
                            <td class="px-4 py-2" id="pore_1_level"></td>
                            <td class="px-4 py-2" id="pore_1_score"></td>
                        </tr>
                        <tr>
                            <td class="px-4 py-2" id="pore_2_cls"></td>
                            <td class="px-4 py-2" id="pore_2_count"></td>
                            <td class="px-4 py-2" id="pore_2_level"></td>
                            <td class="px-4 py-2" id="pore_2_score"></td>
                        </tr>
                    </tbody>
                </table>
                <div class="p-4 bg-blue-100" style="margin-top: 20px;">
                    <p class="text-gray-700 leading-relaxed" id="pore_conclusion">
                    </p>
                </div>
            </div>

            <div class="bg-white rounded-lg shadow-lg p-6 w-80" style="margin-top: 20px;width: 100%">
                <div class="flex items-center mb-4" >
                    <div class="w-4 h-4 bg-green-500 rounded mr-2" style="    height: 30px;width: 5px;"></div>
                    <h1 class="text-xl font-bold text-gray-800">痘痘</h1>
                    <span class="ml-2 text-l font-bold  text-green-500 bg-blue-100" id="pockmark_score"></span>
                </div>
                <div class="flex items-center justify-center p-4">
                    <div class="flex-shrink-0">
                        <img class="h-24 w-24 rounded-full" src="your-image-url.jpg" alt="Profile Image" id="pockmark_image">
                    </div>
                </div>
                <table class="min-w-full text-center">
                    <thead>
                        <tr>
                            <th class="px-4 py-2 ">部位</th>
                            <th class="px-4 py-2 ">数量</th>
                            <th class="px-4 py-2 ">评分</th>
                        </tr>
                    </thead>
                    <tbody class="text-green-800 text-l">
                        <tr>
                            <td class="px-4 py-2" id="pockmark_0_cls"></td>
                            <td class="px-4 py-2" id="pockmark_0_count"></td>
                            <td class="px-4 py-2" id="pockmark_0_score"></td>
                        </tr>
                        <tr>
                            <td class="px-4 py-2" id="pockmark_1_cls"></td>
                            <td class="px-4 py-2" id="pockmark_1_count"></td>
                            <td class="px-4 py-2" id="pockmark_1_score"></td>
                        </tr>
                    </tbody>
                </table>
                <div class="p-4 bg-blue-100" style="margin-top: 20px;">
                    <p class="text-gray-700 leading-relaxed" id="pockmark_conclusion">
                    </p>
                </div>
            </div>

            <div class="bg-white rounded-lg shadow-lg p-6 w-80" style="margin-top: 20px;width: 100%">
                <div class="flex items-center mb-4" >
                    <div class="w-4 h-4 bg-green-500 rounded mr-2" style="    height: 30px;width: 5px;"></div>
                    <h1 class="text-xl font-bold text-gray-800">黑头</h1>
                    <span class="ml-2 text-l font-bold  text-green-500 bg-blue-100" id="blackhead_score"></span>
                </div>
                <div class="flex items-center justify-center p-4">
                    <div class="flex-shrink-0">
                        <img class="h-24 w-24 rounded-full" src="your-image-url.jpg" alt="Profile Image" id="blackhead_image">
                    </div>
                </div>
                <div class="p-4 bg-blue-100" style="margin-top: 20px;">
                    <p class="text-gray-700 leading-relaxed" id="blackhead_conclusion">
                    </p>
                </div>
            </div> 

            <div class="bg-white rounded-lg shadow-lg p-6 w-80" style="margin-top: 20px;width: 100%">
                <div class="flex items-center mb-4" >
                    <div class="w-4 h-4 bg-green-500 rounded mr-2" style="    height: 30px;width: 5px;"></div>
                    <h1 class="text-xl font-bold text-gray-800">肤质</h1>
                    <span class="ml-2 text-l font-bold  text-green-500 bg-blue-100" id="skin_type_score"></span>
                </div>
                <div class="flex items-center justify-center p-4">
                    <div class="flex-shrink-0">
                        <img class="h-24 w-24 rounded-full" src="your-image-url.jpg" alt="Profile Image" id="skin_type_image">
                    </div>
                </div>
                <table class="min-w-full text-center">
                    <thead>
                        <tr>
                            <th class="px-4 py-2 ">部位</th>
                            <th class="px-4 py-2 ">类别</th>
                            <th class="px-4 py-2 ">评分</th>
                        </tr>
                    </thead>
                    <tbody class="text-green-800 text-l">
                        <tr>
                            <td class="px-4 py-2" id="skin_type_0_cls"></td>
                            <td class="px-4 py-2" id="skin_type_0_type"></td>
                            <td class="px-4 py-2" id="skin_type_0_score"></td>
                        </tr>
                        <tr>
                            <td class="px-4 py-2" id="skin_type_1_cls"></td>
                            <td class="px-4 py-2" id="skin_type_1_type"></td>
                            <td class="px-4 py-2" id="skin_type_1_score"></td>
                        </tr>
                        <tr>
                            <td class="px-4 py-2" id="skin_type_2_cls"></td>
                            <td class="px-4 py-2" id="skin_type_2_type"></td>
                            <td class="px-4 py-2" id="skin_type_2_score"></td>
                        </tr>
                        <tr>
                            <td class="px-4 py-2" id="skin_type_3_cls"></td>
                            <td class="px-4 py-2" id="skin_type_3_type"></td>
                            <td class="px-4 py-2" id="skin_type_3_score"></td>
                        </tr>
                        <tr>
                            <td class="px-4 py-2" id="skin_type_4_cls"></td>
                            <td class="px-4 py-2" id="skin_type_4_type"></td>
                            <td class="px-4 py-2" id="skin_type_4_score"></td>
                        </tr>
                    </tbody>
                </table>
                <div class="p-4 bg-blue-100" style="margin-top: 20px; margin-bottom: 15%;width: 100%" id="skin_type_conclusion">
                    <p class="text-gray-700 leading-relaxed">
                    </p>
                </div>
            </div>
        </div>
    </div>

    <script>
        const captureButton = document.getElementById('capture-btn');
        const fileInput = document.getElementById('file-input');
        const canvas = document.getElementById('canvas');
        const context = canvas.getContext('2d');
        let gatherId = "";
        const mobile = $("#mobile").val();;
        
        $(document).ready(function() {
            fetch('https://chongzhi.nthink.cn/jkkc/api/v1/gh/init?mobile=' + mobile, {
                method: 'POST',
                headers: {
                    'apiId': '705k7d1d29',
                    'apiSalt': '654321',
                    'apiSign': '48efffa49fe877b4ae3f41f069354d4c'
                }
            }).then(response => response.json())
            .then(data => {
                gatherId = data.data.gatherId;
                console.log('Success:', data.data.gatherId);
            })
            .catch((error) => {
                console.error('Initialization Error:', error);
                alert("初始化失败，请稍后重试。");
            });
        });

        captureButton.addEventListener('click', () => {
            fileInput.click(); // 触发文件输入
        });

        fileInput.addEventListener('change', () => {
            const file = fileInput.files[0];
            if (file) {
                if (!file.type.startsWith('image/')) {
                    alert('请上传图片文件');
                    return;
                }

                const reader = new FileReader();
                reader.onload = function(e) {
                    const img = new Image();
                    img.onload = function() {
                        // Resize the image if it's too large
                        const maxWidth = 750;
                        const scaleFactor = Math.min(maxWidth / img.width, 1);
                        
                        canvas.width = img.width * scaleFactor;
                        canvas.height = img.height * scaleFactor;
                        
                        context.drawImage(img, 0, 0, canvas.width, canvas.height);

                        try {
                            const imageData = canvas.toDataURL('image/png');
                            const base64Data = imageData.replace(/^data:image\/png;base64,/, '');

                            let loading1 = layer.msg('数据采集中', {
                                icon: 16,
                                shade: 0.3,
                                time: 0
                            });

                            $.ajax({
                                url: 'https://chongzhi.nthink.cn/jkkc/api/v1/gh/aiFace',
                                type: 'POST',
                                async: true,
                                data: {
                                    image: base64Data,
                                    mobile: mobile,
                                    gatherId: gatherId
                                },
                                headers: {
                                    'Content-Type': 'application/x-www-form-urlencoded',
                                    'apiId': '87953d1d29',
                                    'apiSalt': '654321',
                                    'apiSign': '0a33208e2dab82f1ccc8f80ac89c6b4a'
                                },
                                success: function(data) {
                                    console.log('Success:', data);
                                    layer.closeAll();
                                    if (data.code !== '0') {
                                        layui.layer.confirm('数据采集失败，请重试', {
                                            time: 20000, // 20s后自动关闭
                                            btn: ['重新采集'],
                                            yes: function(index, layero) {
                                                window.location.reload();
                                            },
                                            cancel: function() {
                                                window.location.reload();
                                            }
                                        });
                                    } else {
                                        $("#template").hide();
                                        $("#content").show();

                                        $("#age").html(data.data.data.age.result)
                                        $("#color").html(data.data.data.color.result)
                                        $("#skin_type_type").html(data.data.data.skin_type.type)

                                        $("#dark_circle_defeat").html("眼圈<br>"+(data.data.data.defeat_rank.dark_circle * 100).toFixed(0) + "%")
                                        $('#dark_circle_defeat').css('--percent', (data.data.data.defeat_rank.dark_circle * 100) + "%");
                                        $("#pore_defeat").html("毛孔<br>"+ (data.data.data.defeat_rank.pore * 100).toFixed(0) + "%")
                                        $('#pore_defeat').css('--percent', (data.data.data.defeat_rank.pore * 100).toFixed(0) + "%");
                                        $("#pockmark_defeat").html("痘痘<br>"+ (data.data.data.defeat_rank.pockmark * 100).toFixed(0) + "%")
                                        $('#pockmark_defeat').css('--percent', (data.data.data.defeat_rank.pockmark * 100).toFixed(0) + "%");
                                        $("#skin_type_defeat").html("肤质<br>"+ (data.data.data.defeat_rank.skin_type * 100).toFixed(0) + "%")
                                        $('#skin_type_defeat').css('--percent', (data.data.data.defeat_rank.skin_type * 100).toFixed(0) + "%");
                                        $("#blackhead_defeat").html("黑头<br>"+ (data.data.data.defeat_rank.blackhead * 100).toFixed(0) + "%")
                                        $('#blackhead_defeat').css('--percent', (data.data.data.defeat_rank.blackhead * 100).toFixed(0) + "%");

                                        $("#dark_circle_score").html(data.data.data.dark_circle.score + "分")
                                        $("#dark_circle_image").attr('src', data.data.data.dark_circle.filename)
                                        $("#dark_circle_conclusion").html(data.data.data.dark_circle.conclusion)

                                        $("#color_result").html(data.data.data.color.result)
                                        $("#color_conclusion").html(data.data.data.color.conclusion)

                                        $("#pore_score").html(data.data.data.pore.score + "分")
                                        $("#pore_image").attr('src', data.data.data.pore.filename)
                                        $("#pore_conclusion").html(data.data.data.pore.conclusion)

                                        $("#pore_0_cls").html(data.data.data.pore.category[0].cls)
                                        $("#pore_0_count").html(data.data.data.pore.category[0].count)
                                        $("#pore_0_level").html(data.data.data.pore.category[0].level)
                                        $("#pore_0_score").html(data.data.data.pore.category[0].score)
                                        $("#pore_1_cls").html(data.data.data.pore.category[1].cls)
                                        $("#pore_1_count").html(data.data.data.pore.category[1].count)
                                        $("#pore_1_level").html(data.data.data.pore.category[1].level)
                                        $("#pore_1_score").html(data.data.data.pore.category[1].score)
                                        $("#pore_2_cls").html(data.data.data.pore.category[2].cls)
                                        $("#pore_2_count").html(data.data.data.pore.category[2].count)
                                        $("#pore_2_level").html(data.data.data.pore.category[2].level)
                                        $("#pore_2_score").html(data.data.data.pore.category[2].score)

                                        $("#pockmark_score").html(data.data.data.pockmark.score + "分")
                                        $("#pockmark_image").attr('src', data.data.data.pockmark.filename)
                                        $("#pockmark_conclusion").html(data.data.data.pockmark.conclusion)

                                        $("#pockmark_0_cls").html(data.data.data.pockmark.category[0].cls)
                                        $("#pockmark_0_count").html(data.data.data.pockmark.category[0].count)
                                        $("#pockmark_0_score").html(data.data.data.pockmark.category[0].score)
                                        $("#pockmark_1_cls").html(data.data.data.pockmark.category[1].cls)
                                        $("#pockmark_1_count").html(data.data.data.pockmark.category[1].count)
                                        $("#pockmark_1_score").html(data.data.data.pockmark.category[1].score)

                                        $("#blackhead_score").html(data.data.data.blackhead.score + "分")
                                        $("#blackhead_image").attr('src', data.data.data.blackhead.filename)
                                        $("#blackhead_conclusion").html(data.data.data.blackhead.conclusion)

                                        $("#skin_type_score").html(data.data.data.skin_type.score + "分")
                                        $("#skin_type_image").attr('src', data.data.data.skin_type.filename)
                                        $("#skin_type_conclusion").html(data.data.data.skin_type.conclusion)

                                        $("#skin_type_0_cls").html(data.data.data.skin_type.category[0].cls)
                                        $("#skin_type_0_type").html(data.data.data.skin_type.category[0].type)
                                        $("#skin_type_0_score").html(data.data.data.skin_type.category[0].score)
                                        $("#skin_type_1_cls").html(data.data.data.skin_type.category[1].cls)
                                        $("#skin_type_1_type").html(data.data.data.skin_type.category[1].type)
                                        $("#skin_type_1_score").html(data.data.data.skin_type.category[1].score)
                                        $("#skin_type_2_cls").html(data.data.data.skin_type.category[2].cls)
                                        $("#skin_type_2_type").html(data.data.data.skin_type.category[2].type)
                                        $("#skin_type_2_score").html(data.data.data.skin_type.category[2].score)
                                        $("#skin_type_3_cls").html(data.data.data.skin_type.category[3].cls)
                                        $("#skin_type_3_type").html(data.data.data.skin_type.category[3].type)
                                        $("#skin_type_3_score").html(data.data.data.skin_type.category[3].score)
                                        $("#skin_type_4_cls").html(data.data.data.skin_type.category[4].cls)
                                        $("#skin_type_4_type").html(data.data.data.skin_type.category[4].type)
                                        $("#skin_type_4_score").html(data.data.data.skin_type.category[4].score)
                                        $.ajax({
                                            type: "post",
                                            url: '${pageContext.request.contextPath}/mx/aiFace/save',
                                            data: 'code=' + $("#code").val() + '&userName=' + $("#userName").val() + '&mobile=' + $("#mobile").val() + '&userType=' + $("#userType").val()
                                                + '&equityCode=' + $('#equityCode').val() + '&coating=' + data.data.data.age.result + '&tongue=' + data.data.data.color.result,
                                            contentType: "application/x-www-form-urlencoded;charset=utf-8",
                                            success: function (data) {
                                                console.log("上传成功")
                                            },
                                            error: function (re, e, ex) {
                                                console.log("上传失败")
                                            },
                                        });
                                    }
                                },
                                error: function(xhr, status, error) {
                                    console.error('Processing Error:', error);
                                    layer.closeAll();
                                    alert("图片处理失败，请重试");
                                }
                            });
                        } catch (error) {
                            console.error('Canvas processing error:', error);
                            alert("画布处理失败，请重试");
                        }
                    };
                    img.src = e.target.result;
                    $("#capture-btn").hide()
                };
                reader.readAsDataURL(file);
            }
        });

    </script>
</body>
</html>
